<template>
  <div>
    <!--此组件负责整个视频专区的渲染-->
    <div id="video">
      <!--按钮及标签展示区-->
      <div class="video_top">
        <div class="video_top_left">
          <Button type="text" to="/bingo" replace>首页</Button>
          <Button type="text" to="/bingo" replace>热门</Button>
          <Button type="text" to="/bingo" replace>动态</Button>
        </div>
        <div class="video_top_right">
          <Button type="text" v-for="type in videoType" :key="type.index" to="">{{type}}</Button>
        </div>
      </div>
      <!--视频封面展示区-->
      <div class="video_content">
        <div v-for="type in videoType">
          <TypeDetail :typeName="type"/>
        </div>
      </div>
    </div>
    <div id="anchor">
      <Anchor :affix="true" show-ink>
        <AnchorLink href="#体育" title="体育" />
        <AnchorLink href="#科技" title="科技" />
        <AnchorLink href="#美食" title="美食" />
        <AnchorLink href="#游戏" title="游戏" />
        <AnchorLink href="#知识" title="知识" />
        <AnchorLink href="#娱乐" title="娱乐" />
        <AnchorLink href="#娱乐" title="生活" />
        <AnchorLink href="#音乐" title="音乐" />
      </Anchor>
    </div>
  </div>

</template>

<script>
import TypeDetail from "./TypeDetail";
export default {
  name: "Video",
  components: {TypeDetail},
  data(){
    return{
      isClick:false,
      isPlay:false,
      videoType:['其它','体育','科技','美食','游戏','知识','娱乐','生活','音乐'],
    }
  },
  methods:{

  },
  created(){

  }
}
</script>

<style scoped>

#video{
  width:80%;
  display:flex;
  flex-direction: column;
  position:relative;
  left:10%;
  right:10%;
}

.video_top{
  display:flex;
  flex-direction:row;
  width:100%;
  height:60px;
  line-height:60px;
  justify-content: center;
  align-items:center;
}

.video_top_left{
  display:flex;
  flex-direction:row;
  position:relative;
  left:0px;
  width:30%;
  justify-content: center;
}

.video_top_right{
  display:flex;
  flex-direction:row;
  width:70%;
  justify-content: center;
}

.video_content{

}

#anchor{
  position:absolute;
  right:5%;
  top:300px;
}


</style>